<template>
  <div id="app">
    <!-- 顶部导航栏（固定位置） -->
    <header class="header">
      <div class="logo">
        <img src="./assets/speaker-logo.svg" alt="Smart Sound Logo">
        <h1>智能音箱管理系统</h1>
      </div>
      
      <!-- 全局搜索框 -->
      <div class="search-box">
        <el-autocomplete
          v-model="globalSearchKeyword"
          :fetch-suggestions="querySearchAsync"
          placeholder="全局搜索（支持跨模块检索）" 
          prefix-icon="el-icon-search"
          @select="handleSelect"
          @keyup.enter="handleGlobalSearch"
          popper-class="my-autocomplete"
          :trigger-on-focus="false"
          :highlight-first-item="true">
          <template #default="{ item }">
            <div class="search-suggestion-item">
              <i :class="item.icon || 'el-icon-document'"></i>
              <span class="suggestion-name">{{ item.name }}</span>
              <span class="suggestion-path" v-if="item.path">{{ item.path }}</span>
            </div>
          </template>
        </el-autocomplete>
      </div>
      
      <!-- 用户操作区 -->
      <div class="user-actions">
        <!-- 通知中心图标 -->
        <div class="notification" @click="showNotifications">
          <i class="el-icon-bell"></i>
          <span class="badge" v-if="pendingNotifications > 0">{{ pendingNotifications }}</span>
        </div>
        
        <!-- 管理员快捷操作 -->
        <el-dropdown trigger="click" @command="handleCommand">
          <img src="./assets/speaker-logo.svg" alt="Avatar" class="avatar">
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="password">修改密码</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
    
    <!-- 左侧导航树（可折叠） -->
    <aside class="sidebar" :class="{ collapsed: isCollapsed }">
      <!-- 当前模块的二级功能菜单 -->
      <el-menu
        :default-active="activeIndex"
        class="sidebar-menu"
        :collapse="isCollapsed"
        background-color="#001529"
        text-color="rgba(255, 255, 255, 0.65)"
        active-text-color="#fff"
        router>
        
        <!-- ============= 超级管理员菜单项 ============= -->
        <!-- 对0级和1级管理员都显示这些菜单项 -->
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/" route="/">
          <i class="el-icon-s-home"></i>
          <template v-slot:title>总览</template>
        </el-menu-item>
        
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/device">
          <i class="el-icon-cpu"></i>
          <template v-slot:title>设备列表</template>
        </el-menu-item>
        
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/analysis">
          <i class="el-icon-data-analysis"></i>
          <template v-slot:title>数据决策</template>
        </el-menu-item>
        
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/resource">
          <i class="el-icon-folder"></i>
          <template v-slot:title>资源库</template>
        </el-menu-item>
        
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/user">
          <i class="el-icon-user"></i>
          <template v-slot:title>用户列表</template>
        </el-menu-item>
        
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/admin">
          <i class="el-icon-setting"></i>
          <template v-slot:title>管理员账户</template>
        </el-menu-item>
        
        <el-menu-item v-if="checkAdminLevel(0) || checkAdminLevel(1)" index="/admin-logs">
          <i class="el-icon-notebook-2"></i>
          <template v-slot:title>管理员日志</template>
        </el-menu-item>
        
        <!-- ============= 所有管理员通用菜单项 ============= -->
        <!-- 这些菜单项对所有级别的管理员都可见 -->
        <el-menu-item index="/content">
          <i class="el-icon-document"></i>
          <template v-slot:title>公告运营</template>
        </el-menu-item>
        
        <el-menu-item index="/feedback">
          <i class="el-icon-message"></i>
          <template v-slot:title>反馈中心</template>
        </el-menu-item>
        
        <el-menu-item index="/profile">
          <i class="el-icon-user-solid"></i>
          <template v-slot:title>个人信息</template>
        </el-menu-item>
      </el-menu>
      
      <!-- 最近访问记录 -->
      <div class="recent-visits" v-if="!isCollapsed">
        <div class="recent-title">最近访问</div>
        <ul class="recent-list">
          <li v-for="(item, index) in recentVisits" :key="index">
            <router-link :to="item.path">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </router-link>
          </li>
        </ul>
      </div>
      
      <div class="sidebar-toggle" @click="toggleSidebar">
        <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </div>
    </aside>
    
    <!-- 主工作区（自适应宽度） -->
    <main class="main-content" :class="{ 'expanded': isCollapsed }">
      <router-view />
    </main>
    
    <!-- 通知中心抽屉 -->
    <el-drawer
      title="通知中心"
      v-model="notificationsVisible"
      direction="rtl"
      size="30%">
      <div class="notifications-container">
        <div class="notification-tabs">
          <div class="tab" :class="{active: notificationTab === 'all'}" @click="notificationTab = 'all'">全部</div>
          <div class="tab" :class="{active: notificationTab === 'unread'}" @click="notificationTab = 'unread'">未读</div>
        </div>
        <div class="notification-list">
          <div v-for="(item, index) in filteredNotifications" :key="index" class="notification-item" :class="{unread: !item.read}" @click="handleNotificationClick(item)">
            <div class="notification-icon">
              <i :class="getNotificationIcon(item.type)"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ item.title }}</div>
              <div class="notification-desc">{{ item.content }}</div>
              <div class="notification-time">{{ item.time }}</div>
            </div>
            <div class="notification-actions">
              <el-button type="text" size="small" @click.stop="markAsRead(item)">标记已读</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    
    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" v-model="passwordDialogVisible" width="30%">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPasswordChange">确认修改</el-button>
          <el-button @click="passwordDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    
    <!-- 全局命令面板 (Ctrl+K) -->
    <el-dialog title="命令面板" v-model="commandPanelVisible" width="50%" custom-class="command-panel">
      <el-input 
        v-model="commandSearch" 
        placeholder="输入命令或页面名称..." 
        prefix-icon="el-icon-search"
        ref="commandInput"
        @keyup.enter="executeCommand">
      </el-input>
      <div class="command-results">
        <div 
          v-for="(item, index) in filteredCommands" 
          :key="index" 
          class="command-item"
          :class="{active: selectedCommandIndex === index}"
          @click="executeCommandItem(item)"
          @mouseover="selectedCommandIndex = index">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
          <span class="command-shortcut" v-if="item.shortcut">{{ item.shortcut }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { logout, isAuthenticated, refreshAdminSession, getAdminLevel } from './utils/auth';

export default {
  name: 'App',
  data() {
    return {
      isCollapsed: false,
      activeIndex: '/',
      globalSearchKeyword: '',
      pendingNotifications: 0,
      notificationsVisible: false,
      notificationTab: 'all',
      passwordDialogVisible: false,
      passwordForm: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        currentPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      },
      notifications: [],
      recentVisits: [
        { name: '用户列表', path: '/user', icon: 'el-icon-user' },
        { name: '数据决策', path: '/analysis', icon: 'el-icon-data-analysis' }
      ],
      commandPanelVisible: false,
      commandSearch: '',
      selectedCommandIndex: 0,
      commands: [
        { name: '总览', path: '/', icon: 'el-icon-s-home' },
        // 删除仪表盘选项
        { name: '公告运营', path: '/content', icon: 'el-icon-document' },
        { name: '资源库', path: '/resource', icon: 'el-icon-folder' },
        { name: '管理员账户', path: '/admin', icon: 'el-icon-setting' },
        { name: '管理员日志', path: '/admin-logs', icon: 'el-icon-notebook-2' },
        { name: '反馈中心', path: '/feedback', icon: 'el-icon-message' },
        { name: '个人信息', path: '/profile', icon: 'el-icon-user-solid', shortcut: 'Alt+I' },
        { name: '修改密码', command: 'password', icon: 'el-icon-lock', shortcut: 'Alt+P' },
        { name: '刷新页面', command: 'refresh', icon: 'el-icon-refresh', shortcut: 'F5' },
        { name: '退出登录', command: 'logout', icon: 'el-icon-switch-button', shortcut: 'Alt+L' }
      ],
      // 添加可搜索内容数组
      searchableContent: [
        { name: '总览', path: '/', icon: 'el-icon-s-home', keywords: ['首页', '概览', '仪表盘'] },
        { name: '设备列表', path: '/device', icon: 'el-icon-cpu', keywords: ['设备', '列表', '硬件'] },
        { name: '数据决策', path: '/analysis', icon: 'el-icon-data-analysis', keywords: ['数据', '分析', '决策'] },
        { name: '公告运营', path: '/content', icon: 'el-icon-document', keywords: ['公告', '运营', '内容'] },
        { name: '资源库', path: '/resource', icon: 'el-icon-folder', keywords: ['资源', '文件', '下载'] },
        { name: '用户列表', path: '/user', icon: 'el-icon-user', keywords: ['用户', '账号', '权限'] },
        { name: '管理员账户', path: '/admin', icon: 'el-icon-setting', keywords: ['管理员', '账户', '权限'] },
        { name: '管理员日志', path: '/admin-logs', icon: 'el-icon-notebook-2', keywords: ['管理员', '日志', '操作记录', '活动'] },
        { name: '反馈中心', path: '/feedback', icon: 'el-icon-message', keywords: ['反馈', '建议', '问题'] }
      ],
      // 添加用于刷新未处理反馈计数的定时器
      feedbackCountTimer: null,
      feedbackCountRefreshInterval: 60000, // 60秒刷新一次
      // 添加认证检查计时器
      authCheckTimer: null,
      authCheckInterval: 5 * 60 * 1000, // 每5分钟检查一次认证状态
      logoutDelay: 60 * 1000, // 检测到未登录后1分钟内注销
    }
  },
  computed: {
    filteredNotifications() {
      if (this.notificationTab === 'all') {
        return this.notifications;
      } else {
        return this.notifications.filter(item => !item.read);
      }
    },
    filteredCommands() {
      if (!this.commandSearch) return this.commands;
      return this.commands.filter(cmd => 
        cmd.name.toLowerCase().includes(this.commandSearch.toLowerCase())
      );
    }
  },
  created() {
    // 检查用户是否已登录
    if (!isAuthenticated()) {
      console.log('用户未登录，重定向到登录页面');
      this.$router.push('/login');
      return;
    }
    
    // 刷新用户会话时间
    refreshAdminSession();
    
    // 启动认证状态检查定时器
    this.startAuthCheck();
    
    // 根据当前路由设置活动菜单项
    this.activeIndex = this.$route.path;
    
    // 添加全局快捷键
    window.addEventListener('keydown', this.handleKeyDown);
    
    // 获取未处理的反馈数量
    this.fetchUnhandledFeedbackCount();
    
    // 启动定时刷新未处理反馈数量
    this.startFeedbackCountRefresh();
  },
  mounted() {
    // ... existing code ...
    window.addEventListener('beforeunload', this.clearTokenOnExit);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
    window.removeEventListener('beforeunload', this.clearTokenOnExit);
    
    // 清除定时器
    this.stopFeedbackCountRefresh();
    // 清除认证检查定时器
    this.stopAuthCheck();
  },
  watch: {
    $route(to) {
      // 监听路由变化，更新活动菜单项
      this.activeIndex = to.path;
      this.updateRecentVisits(to);
    }
  },
  methods: {
    // ... existing code ...
    clearTokenOnExit() {
      // 移除此方法的内容，不再清除token
    },
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.logout();
      } else if (command === 'password') {
        this.passwordDialogVisible = true;
      } else if (command === 'profile') {
        this.$router.push('/profile');
      }
    },
    logout() {
      // 实现登出逻辑
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 使用认证工具中的logout方法清除登录状态
        logout();
        // 跳转到登录页
        this.$router.push('/login');
      }).catch(() => {});
    },
    showNotifications() {
      this.notificationsVisible = true;
    },
    markAsRead(item) {
      item.read = true;
      // 重新计算未读通知数量
      const unreadCount = this.notifications.filter(n => !n.read).length;
      // 只有当未读数与当前显示的未读数不同时才更新
      if (unreadCount !== this.pendingNotifications) {
        this.pendingNotifications = unreadCount;
      }
    },
    getNotificationIcon(type) {
      switch(type) {
        case 'system': return 'el-icon-info';
        case 'warning': return 'el-icon-warning';
        case 'ticket': return 'el-icon-message';
        default: return 'el-icon-bell';
      }
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    },
    getPageTitle(path) {
      const pathMap = {
        '/': '总览',
        '/device': '设备列表',
        '/analysis': '数据决策',
        '/dashboard': '仪表盘',
        '/content': '公告运营',
        '/resource': '资源库',
        '/user': '用户列表',
        '/admin': '管理员账户',
        '/feedback': '反馈中心',
        '/profile': '个人信息'
      };
      
      // Check if the path is a user detail page
      if (path.startsWith('/user/')) {
        return '用户详情';
      }
      
      return pathMap[path] || '未知页面';
    },
    submitPasswordChange() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          // 实现密码修改逻辑
          this.$message.success('密码修改成功');
          this.passwordDialogVisible = false;
        } else {
          return false;
        }
      });
    },
    updateRecentVisits(route) {
      // 更新最近访问记录
      const path = route.path;
      const title = this.getPageTitle(path);
      
      // 如果已经在列表中，先移除
      const index = this.recentVisits.findIndex(item => item.path === path);
      if (index !== -1) {
        this.recentVisits.splice(index, 1);
      }
      
      // 添加到列表开头
      if (path !== '/') { // 不记录首页
        const icon = this.getRouteIcon(path);
        this.recentVisits.unshift({ name: title, path, icon });
        
        // 保持最多3个记录
        if (this.recentVisits.length > 3) {
          this.recentVisits.pop();
        }
      }
    },
    getRouteIcon(path) {
      const iconMap = {
        '/device': 'el-icon-cpu',
        '/analysis': 'el-icon-data-analysis',
        '/dashboard': 'el-icon-data-line',
        '/content': 'el-icon-document',
        '/resource': 'el-icon-folder',
        '/user': 'el-icon-user',
        '/admin': 'el-icon-setting',
        '/feedback': 'el-icon-message',
        '/profile': 'el-icon-user-solid'
      };
      
      // Check if the path is a user detail page
      if (path.startsWith('/user/')) {
        return 'el-icon-user';
      }
      
      return iconMap[path] || 'el-icon-link';
    },
    handleKeyDown(e) {
      // Ctrl+K 打开命令面板
      if (e.ctrlKey && e.key === 'k') {
        e.preventDefault();
        this.openCommandPanel();
      }
    },
    openCommandPanel() {
      this.commandPanelVisible = true;
      this.commandSearch = '';
      this.selectedCommandIndex = 0;
      // 聚焦搜索框
      this.$nextTick(() => {
        this.$refs.commandInput.focus();
      });
    },
    executeCommand() {
      if (this.filteredCommands.length > 0) {
        this.executeCommandItem(this.filteredCommands[this.selectedCommandIndex]);
      }
    },
    executeCommandItem(item) {
      if (item.path) {
        this.$router.push(item.path);
      } else if (item.command) {
        if (item.command === 'password') {
          this.passwordDialogVisible = true;
        } else if (item.command === 'logout') {
          this.logout();
        } else if (item.command === 'refresh') {
          window.location.reload();
        }
      }
      this.commandPanelVisible = false;
    },
    handleGlobalSearch() {
      if (this.globalSearchKeyword) {
        // 实现搜索逻辑，匹配菜单项并跳转
        const keyword = this.globalSearchKeyword.toLowerCase();
        
        // 获取所有匹配项
        const contentMatches = this.searchableContent.filter(item => 
          item.name.toLowerCase().includes(keyword) || 
          (item.path && item.path.toLowerCase().includes(keyword)) ||
          (item.keywords && item.keywords.some(k => k.toLowerCase().includes(keyword)))
        );
        
        const commandMatches = this.commands.filter(cmd => 
          cmd.name.toLowerCase().includes(keyword) || 
          (cmd.path && cmd.path.toLowerCase().includes(keyword))
        );
        
        // 合并并去重
        const uniquePaths = new Set();
        let allMatches = [];
        
        // 优先添加内容匹配项
        contentMatches.forEach(item => {
          if (!item.path || !uniquePaths.has(item.path)) {
            allMatches.push(item);
            if (item.path) uniquePaths.add(item.path);
          }
        });
        
        // 再添加命令匹配项（如果路径未重复）
        commandMatches.forEach(item => {
          if (!item.path || !uniquePaths.has(item.path)) {
            allMatches.push(item);
            if (item.path) uniquePaths.add(item.path);
          }
        });
        
        if (allMatches.length > 0) {
          // 找到匹配项，跳转到第一个匹配的页面或执行命令
          const firstMatch = allMatches[0];
          if (firstMatch.path) {
            this.$router.push(firstMatch.path);
          } else if (firstMatch.command) {
            this.executeCommandItem(firstMatch);
          }
          
          // 清空搜索框
          this.globalSearchKeyword = '';
        } else {
          // 没有找到匹配项，可以显示提示信息
          this.$message.info('未找到匹配的页面或命令');
        }
      }
    },
    querySearchAsync(queryString, callback) {
      if (queryString) {
        const keyword = queryString.toLowerCase();
        
        // 搜索命令
        const commandResults = this.commands.filter(cmd => 
          cmd.name.toLowerCase().includes(keyword)
        );
        
        // 搜索内容
        const contentResults = this.searchableContent.filter(item => 
          item.name.toLowerCase().includes(keyword) || 
          (item.path && item.path.toLowerCase().includes(keyword)) ||
          (item.keywords && item.keywords.some(k => k.toLowerCase().includes(keyword)))
        );
        
        // 合并结果
        let results = [
          ...contentResults.map(item => ({
            ...item,
            value: item.name,
            type: 'content'
          })),
          ...commandResults.map(item => ({
            ...item,
            value: item.name,
            type: 'command'
          }))
        ];
        
        // 去除重复项 - 根据path进行去重
        const uniquePaths = new Set();
        results = results.filter(item => {
          if (!item.path) return true; // 保留没有path的项（如命令）
          
          // 如果此path已存在，则过滤掉
          if (uniquePaths.has(item.path)) {
            return false;
          }
          
          // 否则添加到已存在路径集合中并保留
          uniquePaths.add(item.path);
          return true;
        });
        
        // 延迟回调模拟异步搜索
        setTimeout(() => {
          callback(results);
        }, 300);
      } else {
        callback([]);
      }
    },
    
    handleSelect(item) {
      if (item.path) {
        this.$router.push(item.path);
      } else if (item.command) {
        this.executeCommandItem(item);
      }
      // 清空搜索框
      this.globalSearchKeyword = '';
    },
    // 检查管理员等级 - 使用auth.js中的方法
    checkAdminLevel(level) {
      const adminLevel = getAdminLevel();
      console.log(`App检查权限: 当前级别 ${adminLevel}, 需要级别 ${level}`);
      
      // 0级管理员拥有所有权限
      if (adminLevel === 0) {
        console.log('App: 0级管理员，拥有所有权限');
        return true;
      }
      
      // 其他情况返回是否相等
      const hasAccess = adminLevel === level;
      console.log(`App: 检查结果 ${hasAccess}`);
      return hasAccess;
    },
    // 获取未处理的反馈数量
    fetchUnhandledFeedbackCount() {
      // 使用axios获取未处理的反馈数量
      axios.get('https://smartsound.top/api/admin/feedback/v1/list', {
        params: {
          page: 1,
          page_size: 1, // 只需要总数，不需要获取所有数据
          status: '未处理' // 只获取未处理的反馈
        }
      })
      .then(response => {
        if (response.data && response.data.code === 0) {
          // 更新未处理的反馈数量
          this.pendingNotifications = response.data.total || 0;
        }
      })
      .catch(error => {
        console.error('获取未处理反馈数量失败:', error);
      });
    },
    
    // 启动定时刷新未处理反馈数量
    startFeedbackCountRefresh() {
      this.feedbackCountTimer = setInterval(() => {
        this.fetchUnhandledFeedbackCount();
      }, this.feedbackCountRefreshInterval);
    },
    
    // 停止定时刷新未处理反馈数量
    stopFeedbackCountRefresh() {
      if (this.feedbackCountTimer) {
        clearInterval(this.feedbackCountTimer);
      }
    },
    
    // 当用户点击通知中心的通知时处理跳转
    handleNotificationClick(notification) {
      // 如果是反馈通知，跳转到反馈中心
      if (notification.type === 'ticket' && notification.content.includes('未处理反馈')) {
        this.$router.push('/feedback');
        this.notificationsVisible = false;
        notification.read = true;
      }
    },
    // 启动认证状态检查
    startAuthCheck() {
      this.authCheckTimer = setInterval(() => {
        if (!isAuthenticated()) {
          console.log('认证已过期，将在1分钟内注销');
          // 显示提示信息
          this.$message.warning('您的登录状态已过期，将在1分钟内自动退出，请保存您的工作');
          
          // 设置延迟注销
          setTimeout(() => {
            console.log('执行注销');
            // 清除其他定时器
            this.stopFeedbackCountRefresh();
            this.stopAuthCheck();
            // 跳转到登录页
            this.$router.push('/login');
            // 显示已注销提示
            this.$message.info('您已被注销，请重新登录');
          }, this.logoutDelay);
        } else {
          // 刷新会话时间
          refreshAdminSession();
        }
      }, this.authCheckInterval);
      
      console.log('已启动认证状态定时检查');
    },
    
    // 停止认证状态检查
    stopAuthCheck() {
      if (this.authCheckTimer) {
        clearInterval(this.authCheckTimer);
        this.authCheckTimer = null;
      }
    },
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 21, 41, 0.08);
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
  min-width: 200px;
}

.logo img {
  margin-right: 12px;
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
  border-radius: 8px;
  background: white;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.logo img:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.logo h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
  background: linear-gradient(90deg, #1890ff, #722ed1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin-right: 24px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  padding: 8px 2px;
  position: relative;
  transition: color 0.3s;
}

.nav-menu a.active, .nav-menu a:hover {
  color: #1890ff;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #1890ff;
  transition: width 0.3s;
}

.nav-menu a.active::after, .nav-menu a:hover::after {
  width: 100%;
}

.search-box {
  margin-left: auto;
  width: 320px;
  margin-right: 20px;
  flex-shrink: 0;
  position: relative;
}

/* 设置自定义搜索框样式，提高选择器优先级 */
#app .header .search-box .el-input .el-input__wrapper {
  background-color: #f5f7fa !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  padding: 1px 11px 1px 40px !important;
}

#app .header .search-box .el-input .el-input__wrapper:hover {
  background-color: #edf2fc !important;
}

#app .header .search-box .el-input.is-focus .el-input__wrapper {
  background-color: #fff !important;
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2) !important;
  border: none !important;
}

/* 确保前缀图标正确定位 */
.search-box .el-input__prefix {
  left: 12px;
}

.search-box .el-input__icon {
  font-size: 16px;
  color: #909399;
  transition: all 0.3s;
}

.search-box .el-input.is-focus .el-input__icon {
  color: #1890ff;
}

.user-actions {
  display: flex;
  align-items: center;
  margin-left: 10px;
  min-width: 100px;
  justify-content: flex-end;
}

.notification {
  position: relative;
  margin-right: 24px;
  cursor: pointer;
  font-size: 18px;
  color: #606266;
  transition: all 0.3s;
}

.notification:hover {
  color: #1890ff;
  transform: scale(1.1);
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(45deg, #f56c6c, #f78989);
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 16px;
  box-shadow: 0 2px 5px rgba(245, 108, 108, 0.3);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  background: white;
  padding: 2px;
}

.avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.main-content {
  flex: 1;
  padding: 24px;
  margin-left: 200px;
  margin-top: 64px;
  transition: all 0.3s ease;
  overflow-y: auto;
  position: relative;
}

.main-content.expanded {
  margin-left: 64px;
}

.sidebar {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 200px;
  background: linear-gradient(to bottom, #001529, #003a70);
  transition: all 0.3s ease;
  z-index: 9;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-menu {
  border-right: none;
  flex: 1;
}

.sidebar-menu .el-menu-item {
  border-left: 3px solid transparent;
  transition: all 0.3s;
}

.sidebar-menu .el-menu-item.is-active {
  border-left: 3px solid #1890ff;
  background-color: rgba(24, 144, 255, 0.15) !important;
}

.sidebar-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-toggle {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.sidebar-toggle:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.sidebar-toggle i {
  font-size: 18px;
  transition: transform 0.3s;
}

.sidebar-toggle:hover i {
  transform: scale(1.2);
}

.recent-visits {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-title {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin-bottom: 10px;
  padding-left: 12px;
  font-weight: 500;
}

.recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-list li {
  margin-bottom: 6px;
}

.recent-list a {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s;
}

.recent-list a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateX(3px);
}

.recent-list i {
  margin-right: 10px;
  font-size: 16px;
}

.help-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  transition: all 0.3s;
}

.help-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.5);
}

.help-button i {
  font-size: 24px;
}

.notification-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 18px;
}

.notification-tabs .tab {
  padding: 12px 16px;
  cursor: pointer;
  margin-right: 12px;
  position: relative;
  font-weight: 500;
  transition: all 0.3s;
}

.notification-tabs .tab:hover {
  color: #1890ff;
}

.notification-tabs .tab.active {
  color: #1890ff;
}

.notification-tabs .tab.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1890ff;
}

.notification-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.notification-item:hover {
  background-color: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.notification-item.unread {
  background-color: rgba(24, 144, 255, 0.05);
  border-left: 3px solid #1890ff;
}

.notification-icon {
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(24, 144, 255, 0.1);
}

.notification-icon i {
  font-size: 20px;
  color: #1890ff;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #303133;
}

.notification-desc {
  color: #606266;
  margin-bottom: 6px;
  line-height: 1.5;
}

.notification-time {
  color: #909399;
  font-size: 12px;
}

.notification-actions {
  margin-top: 6px;
}

.notification-actions .el-button--text {
  padding: 0;
  font-size: 13px;
}

.command-panel .el-dialog__header {
  padding: 16px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.command-panel .el-dialog__body {
  padding: 16px 20px;
}

.command-panel .el-dialog__title {
  font-weight: 600;
  font-size: 16px;
}

.command-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 12px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.command-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.command-item.active,
.command-item:hover {
  background-color: #f0f7ff;
}

.command-item i {
  margin-right: 12px;
  font-size: 18px;
  color: #1890ff;
  width: 24px;
  text-align: center;
}

.command-shortcut {
  margin-left: auto;
  color: #909399;
  font-size: 12px;
  padding: 2px 6px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 对话框样式优化 */
.el-dialog {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.el-dialog__header {
  background-color: #f5f7fa;
  padding: 16px 20px;
  margin: 0;
}

.el-dialog__title {
  font-weight: 600;
}

.el-dialog__headerbtn {
  top: 16px;
  right: 16px;
}

.el-dialog__body {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form-item__label {
  font-weight: 500;
}

.el-input__inner {
  border-radius: 4px;
}

.el-button {
  border-radius: 4px;
  transition: all 0.3s;
}

.el-button--primary {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  border-color: #1890ff;
}

.el-button--primary:hover {
  background: linear-gradient(45deg, #40a9ff, #69c0ff);
  border-color: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.4);
}

/* 适配移动设备 */
@media (max-width: 768px) {
  .sidebar {
    width: 64px;
  }
  
  .sidebar.expanded {
    width: 200px;
  }
  
  .main-content {
    margin-left: 64px;
    padding: 16px;
  }
  
  .main-content.expanded {
    margin-left: 200px;
  }

  .header {
    padding: 0 16px;
  }

  .logo h1 {
    font-size: 16px;
  }

  .search-box {
    width: 180px;
  }
  
  #app .header .search-box .el-input .el-input__wrapper {
    padding: 1px 11px 1px 35px !important;
  }
  
  .search-box .el-input__prefix {
    left: 10px;
  }
  
  .search-box .el-input__icon {
    font-size: 14px;
  }
}

/* 搜索建议样式 */
.my-autocomplete {
  width: auto !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 8px 0;
  border: none;
}

.search-suggestion-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  transition: all 0.2s;
}

.search-suggestion-item:hover {
  background-color: #f0f7ff;
}

.search-suggestion-item i {
  margin-right: 10px;
  font-size: 16px;
  color: #1890ff;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: rgba(24, 144, 255, 0.1);
}

.suggestion-name {
  font-weight: 600;
  color: #303133;
}

.suggestion-path {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
  background-color: #f5f7fa;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Card styles for the components */
.el-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-card__header {
  padding: 16px 20px;
  font-weight: 600;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ebeef5;
}

.el-card__body {
  padding: 20px;
}

/* Animations for page transitions */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>

